*{
    margin:0;
    padding: 0;
    outline: none;
    list-style: none;
    text-decoration: none;
}
html,body{
    height: 100%;
}
.sky{
    height: 100%;
    background: #007fd5;
    overflow: hidden;
    position: relative;
    animation: key_run 50s ease-out infinite;
    transform: translate3d(0,0,0);
}
@keyframes key_run{
    0%{
        background:#007fd5;
    }
    50%{
        background: #000000;

    }
    100%{
        background: #007fd5;
    }
}
.sky .cloud1{
    background:url('./img/yun1.png');
    position: absolute;
    left: 0;
    top: 220px;
    height: 100%;
    width:300%;
    background-size:50%;
    animation: cloud1 50s linear infinite;
    transform: translate3d(0,0,0)
}
@keyframes cloud1{
    0%{
        left:0;
    }
    100%{
        left:-200%;
    }
}
.sky .cloud2{
    background:url('./img/yun2.png');
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width:100%;
    background-size:100%;
    animation: cloud2 70s linear infinite;
    transform: translate3d(0,0,0)
}
@keyframes cloud2{
    0%{
        left:0;
    }
    100%{
        left:-200%;
    }
} 
.sky .cloud3{
    background:url('./img/yun3.png');
    position: absolute;
    left: 0;
    top: 61px;
    height: 100%;
    width:400%;
    background-size:60%;
    animation: cloud3 100s linear infinite;
    transform: translate3d(0,0,0);
}
@keyframes cloud3{
    0%{
        left:0;
    }
    100%{
        left:-200%;
    }
} 
.sky .cloud4{
    background:url('./img/yun4.png');
    position: absolute;
    left: 0;
    top: -350px;
    height: 100%;
    width:300%;
    background-size:18%;
    animation: cloud4 130s linear infinite;
    transform: translate3d(0,0,0)
}
@keyframes cloud4{
    0%{
        left:0;
    }
    100%{
        left:-200%;
    }
}